<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>元素的增删改查</title>
<!-- 加入样式表 -->
<style type="text/css">
	div { border:#0099FF 2px solid;height:60px;width:350px;margin:20px 10px;padding:5px 7px;line-height:60px;font-size:26px;text-align:center;}
	#div_1{ background-color:#d400ff; }
	#div_2{ background-color:#FF3399; }
	#div_3{ background-color:#00FF00; }
	#div_4{ background-color:#FFFF66; }
	#info{ width:250px;height:90px;font-size:22px;padding:5px;resize:none;}
	input{font-size:18px;}
</style>

<!-- 引入jquery的js库
<script src="js/jquery-1.8.3.min.js"></script> -->
<script type="text/javascript">
	/** 练习1、添加元素:添加一个div元素到body中 */
	function addNode(){
		//创建一个div元素
		var div = document.createElement("div");
		div.innerHTML = "我是新来的....";
		//获取父元素(body)
		var oBody = document.body;
		//将div元素挂载到body上
		oBody.appendChild(div);
	}

	/** 练习2、删除元素: 删除id为div_2的元素 */
	//parentNode
	function deleteNode(){
		//获取要删除的元素
		var div2 = document.getElementById("div_2");
		//获取父元素
		var body = div2.parentNode;
		//解除父子关系
		body.removeChild(div2);
	}

	/** 练习3、更新元素内容：将div_3的内容更新为当前时间 */
	function updateNode(){
		//1.获取要更新的元素
		var div3 = document.getElementById("div_3");
		//2.将元素内容替换为当前时间
		div3.innerHTML = new Date().toLocaleString();
	}
</script>
</head>
<body>
	<input type="button" onclick="addNode()"
			value="创建一个div添加到body中"/>
    <input type="button" onclick="deleteNode()"
    		value="删除id为div_2的元素"/>
    <input type="button" onclick="updateNode()"
    		value="将div_3的内容更新为当前时间"/><hr/>
    <div id="div_1">
		div_1
    </div>
    <div id="div_2">
    	div_2
    </div>
    <div id="div_3">
    	div_3
    </div>
    <div id="div_4">
    	div_4
    </div>

	

	
</body>
</html>
